<template>
 <!-- 容器 -->
  <el-container>
    <!-- 头部 -->
    <el-header>
      <web-header @asideFlag="asideControl"></web-header>

    </el-header>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside :style="asideStyle">
      <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group> -->
      <!-- :router="true" -->
      <el-menu
        default-active="/webIndex"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
      >
       <!-- 主题2 -->
        <el-menu-item index="/webIndex">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
      <!-- 主题1 -->
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
          </template>
          <el-menu-item-group>
            <!-- <span slot="title">分组一</span> -->
            <el-menu-item index="1-1"
              >选项1
            </el-menu-item>
            <el-menu-item index="/pdf">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <span slot="title">选项4</span>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <!-- 主题2 -->
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <!-- 主题3 -->
        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <!-- 主题4 -->
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <!-- 主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
      <!-- 尾部 -->
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
  </el-container>
</template>


<style scope>
.el-header,
.el-footer {
  width: 100%;
  height: 10vh;
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 10vh;
}

.el-aside {
  min-width: 60px !important;
  max-width: 200px !important;
  height: 90vh;
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  /* line-height: 90vh; */
}

.el-main {
  background-color: pink;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}

body > .el-container {
  margin-bottom: 40px;
}
</style>

<script>
import WebHeader from "./WebHeader.vue";
export default {
  data() {
    return {
      webIndex:'/webIndex',
      isCollapse: false,
      asideStyle: {
        width: "200px",
      },
    };
  },
  components: {
    WebHeader,
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 侧边栏控制方法
    asideControl(val) {
      console.log(val);
      if (val === "展开") {
        this.isCollapse = false;
        this.asideStyle.width = "200px";
      } else {
        this.isCollapse = true;
        this.asideStyle.width = "65px";
      }
    },
    toPath(path) {
      // console.log(path)
      // this.$emit("pathPush",path);
      this.$router.replace(path);
    },
  },
};
</script>
